
<template>
  <div class="plate-inflow">
    <div class="plate-item" v-for="item in plateData" :key="item.name">
      <div class="left-name font-14">{{ item.name }}</div>
      <div class="middle-bar">
        <div class="progress-bar"
          :style="{
            width: `${getBarWidth(item.value)}%`,
            backgroundColor: item.value >= 0 ? '#2abc5a':'#67C23A'
          }"
        ></div>
      </div>
      <div class="right-value font-right" :class="{'up': item.value >= 0, 'down': item.value < 0}">
        {{ item.value >= 0 ? '+' : '' }}{{ item.value }}%
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PlateInflow',
  props: {
    plateData: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    getBarWidth(value) {
      // 直接返回100%，让进度条填满
      return value;
    }
  }
}
</script>

<style lang="scss" scoped>
.plate-inflow {
  padding: 2rem;
  background: #000;

  .plate-item {
    display: flex;
    align-items: center;
    margin-bottom: 1.875rem;
    height: 3.25rem;

    .left-name {
      width: 10rem;
      color: #fff;
      white-space: nowrap;
    }

    .middle-bar {
      flex: 1;
      height: 100%;
      background: #2C2C2E;
      border-radius: 0.125rem;
      margin: 0 1rem;
      overflow: hidden;

      .progress-bar {
        height: 100%;
        transition: width 0.3s ease;
        opacity: 0.8; // 可以适当调整透明度让颜色不那么刺眼
      }
    }

    .right-value {
      width: 7rem;
      text-align: right;
      font-weight: 500;

      &.up {
        color: #2abc5a;
      }

      &.down {
        color: #c7697f;
      }
    }
  }
}
</style>
/**
 * 行业板块净流入
 */
